﻿@namespace Masa.Blazor.Components.TimePicker
@using StyleBuilder = Masa.Blazor.Core.StyleBuilder
@inherits ThemeComponentBase

<CascadingValue Value="ComputedTheme" Name="MasaBlazorCascadingTheme">
    <div class="@GetClass()"
         @onmousedown="@OnMouseDown"
         @onmousedown:preventDefault
         @onmouseup="@OnMouseUp"
         @onmouseup:stopPropagation
         @onmouseleave="@OnMouseLeave"
         @onmousemove="@OnDragMove"
         @onmousemove:preventDefault
         @ontouchend="@OnMouseUp"
         @ontouchend:stopPropagation
         @ref="Ref">
        <div class="@_block.Element("inner")" @ref="InnerClockElement">
            @GenHand()

            @for (var value = Min; value <= Max; value = value + Step)
            {
                @GenItem(value)
            }

        </div>
    </div>
</CascadingValue>

@code {

    private RenderFragment GenHand() => __builder =>
    {
        var color = Value != null ? Color : "";
        var scale = $"scaleY({HandScale(DisplayedValue)})";
        var angle = Rotate + DegreesPerUnit * (DisplayedValue - Min);
        <div class="@_handModifierBuilder.Add("inner", IsInner(Value)).AddBackgroundColor(color)"
             style="@(StyleBuilder.Create().AddBackgroundColor(color).Add("transform", $"rotate({angle}deg) {scale}"))">
        </div>
    };

    private RenderFragment GenItem(int value) => __builder =>
    {
        var color = value == Value ? Color : "";
        var (x, y) = GetPosition(value);
        <span class="@_itemModifierBuilder.Add("active", value == DisplayedValue).Add("disabled", Disabled || !IsAllowed(value)).AddBackgroundColor(color)"
              style="@(StyleBuilder.Create().Add("left", $"{50 + x * 50}%").Add("top", $"{50 + y * 50}%").AddBackgroundColor(color))">
            <span>@Format?.Invoke(value)</span>
        </span>
    };

}